<template>
<div>
  <p>欢迎光临_vue开发的收银系统_水果店</p>
  <div class="hz">
    <h3>苹果10￥/斤，折扣<8折></h3>
    <span>请输入你要购买的斤数:</span><input type="number" v-model.number="jg"><br>
    <button @click='md'>结账买单~</button>
    <p>结账单:总价:{{jz}}￥元 折后价:{{zh}}￥元 省了:{{sl}}￥元</p>
  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
      jg:'',
      jz:0,
      zh:0,
      sl:0
    }
  },
  methods: {
    md(){
      this.jz=this.jg*10;
      this.zh=this.jg*10*0.8;
      this.sl=this.jz-this.zh;
    }
  }
};
</script>

<style>
.hz{
  border:1px solid #000;
}
</style>